<template>
	<div class="layout">
		<div class="container">
			<Header>
				<template #header_left>
					<div class="back" @click="goBack" v-if="isChangeType">
						<image class="back_img" src="../../static/img/back.png"></image>
					</div>
				</template>
			</Header>
			<div class="main">
				<div class="side" v-if="!isChangeType">
					<div class="logo">
						<image class="speaks" src="../../static/img/Speaks.svg" />
					</div>
					<div class="send">
						<SendMsg :isWriteing="isWriteing" @addNewChatData="addNewChatData"></SendMsg>
					</div>
					<div class="desc">“Look at these popular foolish questions. <br/> Pick one if you dare.”</div>
					<div class="list">
						<div class="list_item" v-for="item in lists" :key="item" @click="addNewChatData(item)">{{ item }}</div>
					</div>
				</div>
				<div :class="['content', { 'active': isChangeType }]">
					<div class="tips">“Talking to you is torment, but I have no choice.”</div>
					<div class="chat">
						<ListBox ref="socketRef" :isLoadRefresh="isLoadRefresh" :msg="msg"></ListBox>
					</div>
					
					<div class="send">
						<SendMsg :isWriteing="isWriteing" @addNewChatData="addNewChatData"></SendMsg>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onShow } from "@dcloudio/uni-app";
import { ref, computed, onMounted, nextTick, watch } from 'vue';
import { useWebSocketStore } from '@/store/index.js';
import apis from '@/apis/apis';

const lists = ref([]);
const socketRef = ref();
const isWriteing = ref(false);    // 实时消息，正在写入的状态...
const isLoadRefresh = ref(false);  // 判断是否在AI生成中
const isChangeType = ref(false);
const msg = ref();
const socketStore = useWebSocketStore();
// 定义响应式的变量来存储当前的媒体查询状态
const isSmallScreen = computed(() => loginStore().isSmallScreen);

const getQuestions = async () => {
	const { data: res } = await apis.getRandomQuestions();
	
	if (res.code == 200) {
		lists.value = res.data;
	}
};

// 添加新的发送消息
const addNewChatData = (val) => {
	if (!isWriteing.value) {
		msg.value = val;
		if (isSmallScreen.value) {
			isChangeType.value = true;
		}
	}
}

const goBack = () => {
	isChangeType.value = false;
	socketStore.disconnectSocket();
}

watch(() => socketRef.value?.isWriteing, val => {
	isWriteing.value = val;
})

onMounted(() => {
	nextTick(() => {
		socketRef.value.reload();
	});
	
	getQuestions();
})
</script>

<style scoped lang="scss">
.layout {
	position: relative;
	background: url('../../static/img/bg-2.jpg') center no-repeat;
	background-size: cover;
	
	&::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.12+100 */
		background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}
}

.container {
	position: relative;
	z-index: 9;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.back {
	display: inline-flex;
	align-items: center;
	padding: 0 0 0 40upx;
	flex-direction: column;
	cursor: pointer;
}

.back_img {
	flex-shrink: 0;
	width: 80upx;
	height: 80upx;
	margin-right: 20upx;
}

.main {
	display: flex;
	height: calc(100% - 16upx - 80upx - 40upx - 10upx - 28upx);
	
	.side {
		flex: 1;
		text-align: center;
		
		.send {
			display: none;
		}
	}
	
	.logo {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 40upx;
		
		.speaks {
			width: 700upx;
			height: 180upx;
		}
		
		.wins {
			width: 680upx;
			height: 96upx;
		}
	}
	
	.content {
		display: flex;
		flex-direction: column;
		flex: 1.5;
		padding-right: 120upx;
		
		.send {
			margin: 60upx 60upx 120upx;
		}
	}
	
	.desc {
		width: 60%;
		color: #DDC090;
		font-size: 40upx;
		font-style: normal;
		font-weight: 500;
		line-height: 56upx;
		margin: 10% auto 40upx;
		text-align: left;
	}
	
	.list {
		min-width: 60%;
		max-width: 85%;
		margin: 0 auto;
		
		.list_item {
			border: 1px solid #A0865B;
			text-align: right;
			color: #FFF;
			font-size: 32upx;
			line-height: 42upx;
			font-style: normal;
			font-weight: 500;
			padding: 25upx 32upx 25upx 0;
			margin-bottom: 16upx;
			cursor: pointer;
			
			&::before {
				content: '';
				display: inline-block;
				width: 24upx;
				height: 24upx;
				background: url('../../static/img/arrow.svg') no-repeat;
				background-size: contain;
				opacity: 0;
			}
			
			&:hover, &.active {
				background: linear-gradient(90deg, rgba(78, 10, 10, 0.80) 0%, #712323 50%, rgba(78, 10, 10, 0.80) 100%);
			
				&::before {
					opacity: 1;
				}
			}
		}
	}
	
	.tips {
		color: #DDC090;
		font-size: 60upx;
		font-weight: 500;
		line-height: 60upx; /* 175% */
		margin: 80upx 0;
	}
}

.chat {
	flex: 1;
	padding: 40upx;
	border-radius: 24upx;
	height: calc(100% - 60upx - 160upx - 80upx - 145upx - 60upx - 120upx);
	background: linear-gradient(270deg, rgba(0, 0, 0, 0.50) 0%, #000 50%, rgba(0, 0, 0, 0.50) 100%);
}

.chat_item {
	display: flex;
	margin-bottom: 32upx;
	
	.avatar_img {
		width: 56upx;
		height: 56upx;
		border: 2upx solid #fff;
		margin-right: 20upx;
		border-radius: 100%;
	}
	
	.name {
		color: #FFF;
		font-size: 34upx;
		font-style: normal;
		font-weight: 800;
		line-height: 40upx;
		margin-bottom: 8upx;
	}
	
	.content {
		color: #DDC090;
		font-size: 34upx;
		font-style: normal;
		font-weight: 500;
		line-height: 40upx;
	}
}

.mine {
	justify-content: flex-end;
	
	.content {
		color: #fff;
	}
}

@media (max-width: 1024px) {
	.main {
		
		.side {
			.send {
				display: block;
				padding: 0 32upx;
				
				.send_ipt {
					width: 100%;
				}
			}
		}
		
		.logo {
			margin: 20upx 0;
			
			.speaks {
				width: 700upx;
				height: 180upx;
			}
			
			.wins {
				width: 560upx;
				height: 80upx;
			}
		}
		
		.desc {
			width: 90%;
			font-size: 32upx;
			line-height: 48upx; /* 175% */
			padding: 0;
			margin: 30upx auto 40upx;
			background: transparent;
			text-align: center;
		}
		
		.list {
			width: 90%;
			
			.list_item {
				text-align: left;
				color: #FFF;
				font-size: 28upx;
				line-height: 40upx;
				font-style: normal;
				font-weight: 500;
				padding: 10upx;
				margin-bottom: 8upx;
			}
		}
		
		.tips {
			font-size: 32upx;
			line-height: 48upx; /* 175% */
			margin-top: 10upx;
			color: #fff;
		}
		
		.content {
			display: none;
			
			&.active {
				display: flex;
				padding: 0;
				
				.tips {
					margin: 20upx auto;
					font-size: 32upx;
					text-align: center;
					color: #DDC090;
				}
				
				.chat {
					margin: 0 32upx;
					border-radius: 8px;
					background: linear-gradient(270deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.30) 50%, rgba(0, 0, 0, 0.15) 100%);
				}
				
				.send {
					margin: 24upx 32upx;
					padding-bottom: constant(safe-area-inset-bottom);
					padding-bottom: env(safe-area-inset-bottom);
				}
			}
		}
	}
}
</style>